<script lang="ts" setup>
import {computed, onMounted, ref} from "vue";
import {getMergeTagListApi} from '@/api/tag.js'

const tagIndex = ref(0)
const tags = ref([
  {
    id: 1,
    name: '待同意',
    approvedStatus: 2,
  },
  {
    id: 2,
    name: '已同意',
    approvedStatus: 3
  },
  {
    id: 3,
    name: '不同意',
    approvedStatus: 4
  }
])
const tagMergeList = ref([])

const getTagMergeList = async () => {
  const res = await getMergeTagListApi()
  tagMergeList.value = res.data
}

const filterList = computed(() => {
  return tagMergeList.value.filter(item => item.approvedStatus === tags.value[tagIndex.value].approvedStatus)
})
const toggle = (e) => {
  tagIndex.value = e.index
}

const getDetail = () => {
  uni.navigateTo({url: '/pages/merge/mergeDetail'})
}
onMounted(() => {
  getTagMergeList()
})
</script>

<template>
  <view class="container">
    <view class="tab">
      <up-tabs
          :active-style="{color:'#2E6BF8',fontWeight:'500',fontSize:'32rpx'}"
          :list="tags"
          itemStyle="width:280rpx;padding-left: 15px; padding-right: 15px; height: 34px;"
          line-height="4rpx"
          line-width="30"
          @click="toggle"
      ></up-tabs>
    </view>
    <view class="list">
      <up-list>
        <up-list-item v-for="item in filterList" :key="item.id">
          <view class="item" @click="getDetail">
            <up-text :text="item.title" bold size="32rpx"></up-text>
            <up-text :text="`合并说明：${item.reason}`" color="#808080" margin="12rpx 0" size="24rpx"></up-text>
            <up-text :text="`标签显示名：${item.name}`" color="#808080" size="24rpx"></up-text>
            <up-divider :dashed="true" custom-style="width:100%" lineColor="#808080"></up-divider>
            <up-text :text="`标签ID：${item.tagId}`" color="#808080" margin="12rpx 0" size="24rpx"></up-text>
          </view>
        </up-list-item>
      </up-list>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #F3F5F9;

  .tab {
    width: 686rpx;
    height: 80rpx;
    background: #FFFFFF;
    box-shadow: 0 6rpx 12rpx 0 #dae4f080;
    border-radius: 50rpx;
  }

  .list {
    margin-top: 30rpx;

    .item {
      padding: 30rpx 20rpx;
      width: 686rpx;
      height: 326rpx;
      background: #FFFFFF;
      box-shadow: 0 6rpx 12rpx 0 #dae4f080;
      border-radius: 24rpx;
      filter: blur(0);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      margin: 30rpx auto;
    }
  }
}
</style>
